
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <base href="<%=basePath %>">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>new jsp</title>
    <link rel="stylesheet" href="/resources/lib/layui-v2.6.3/css/layui.css">
    <script type="text/javascript" src="/resources/lib/layui-v2.6.3/layui.js"></script>

    <script type="text/html" id="topToolbar">
        <div class="layui-btn-group">
            <button lay-event="addOne" class="layui-btn layui-btn-checked"><i class="layui-icon layui-icon-add-1"/>添加单个
            </button>


        </div>
    </script>

    <script type="text/html" id="rowToolbar">
        <div class="layui-btn-group">
            <button lay-event="update" class="layui-btn layui-btn-primary"><i class="layui-icon layui-icon-edit"/>修改
            </button>
            <button lay-event="quit" class="layui-btn layui-btn-danger"><i class="layui-icon layui-icon-delete"/>离职
            </button>
            <button lay-event="resetPwd" class="layui-btn layui-btn-warm"><i class="layui-icon layui-icon-delete"/>重置密码
            </button>


        </div>
    </script>
    <script type="text/javascript">
        layui.use(['table', 'layer', 'laydate', 'jquery'], function () {
            let table = layui.table;
            let $ = layui.jquery;
            let layer = layui.layer;
            let form = layui.form;
            //渲染数据表格
            let userTable = table.render({
                elem: "#scoresTable",
                cols: [ [
                    {field: 'aaa', type: "checkbox"},
                    {field: 'bbb', title: '序号', width: 80, type: "numbers"},
                    {field: 'id', title: '主键', width: 80},
                    {field: 'username', title: '用户名', width: 80},
                    {field: 'password', title: '密码', width: 80},
                    {field: 'realname', title: '真实姓名', width: 80},
                    {
                        field: 'role', title: '角色', width: 80, templet: function (res) {
                            if (res.role == 1) {
                                return "<font color='blue'>管理员</font>"
                            } else if (res.role == 2) {
                                return "<font color='green'>业务员</font>"
                            }
                            return '未知角色'
                        }
                    },
                    {
                        field: 'img', title: '在职状态', width: 80, templet: function (res) {
                            if (res.deleted == 1) {
                                return "<font color='blue'>在职</font>"
                            } else if (res.deleted == 2) {
                                return "<font color='red'>离职</font>"
                            }
                            return '未知状态'
                        }
                    },
                    {field: 'createTime', title: '入职时间', width: 150},
                    {field: 'updateTime', title: '更新时间', width: 150},
                    {field: 'deletedTime', title: '离职时间', width: 100},
                    {field: 'eee', title: '操作', width: 300, toolbar: "#rowToolbar"},
                ] ],
                url: "/user/list.do",
                page: true,
                limit: 2,
                limits: [2, 4, 6],
                toolbar: "#topToolbar"

            })
            //from监听模糊查询
            // 表单事件
            //给提交按钮添加提交事件  lay-filter值为按钮的lay-filter值
            form.on("submit(submitfilter)", function (obj) {
                let data = obj.field;
                userTable.reload({
                    where: data
                })
                return false;
            });

            //监听表头的事件
            table.on("toolbar(userTable)", function (obj) {
                console.log(obj);
                switch (obj.event) {
                    case 'addOne':
                        openAddLayer();//打开添加的弹出层
                        break;
                }
            });
            //监听行工具条的事件
            table.on('tool(userTable)', function (obj) {
                switch (obj.event) {
                    case 'update':
                        openUpdateLayer(obj.data)
                        break;
                    case 'quit':
                        layer.confirm("您确定要离职要让【" + obj.data.realname + "】离职吗？", {icon: 3, title: '提示'}, function () {
                            $.post("/user/quit.do", {id: obj.data.id}, function (res) {
                                layer.msg(res.msg);
                                if (res.code == 200) {
                                    //刷新表格
                                    userTable.reload();


                                }
                            })


                        })

                        break;
                    case 'resetPwd':
                        layer.confirm("您确定要重置【" + obj.data.realname + "】的密码吗？？", {icon: 3, title: '提示'}, function () {
                            $.post("/user/resetPwd.do", {id: obj.data.id}, function (res) {
                                layer.msg(res.msg);
                                if (res.code == 200) {
                                    //刷新表格
                                    userTable.reload();

                                }
                            })


                        })

                        break;
                }
            });

            //打开添加的弹出层的方法
            let url; //提交的URL
            let mainIndex; //当前弹出层的index
            function openAddLayer() {
                mainIndex = layer.open({
                    type: 1,//页面层
                    title: '添加用户',
                    content: $("#addOrUpdateForm"),
                    area: ['400px', '300px'],
                    success: function () {
                        // 当你需要在层创建完毕时即执行一些语句
                        //因为共用同一个表单
                        $("#doReset").click();
                        url = "/user/addUser.do";
                    }
                })
            }

            //打开修改的弹出层的方法
            function openUpdateLayer(data) {
                mainIndex = layer.open({
                    type: 1,//页面层
                    title: '修改[' + data.realname + ']用户',
                    content: $("#addOrUpdateForm"),
                    area: ['400px', '300px'],
                    success: function () {
                        //回显数据
                        form.val('dataFrm', data);
                        url = "/user/updateUser.do";
                    }
                })
            }

            //监听提交事件也就是弹出层引用的同一个表单
            form.on("submit(doSubmit)", function (obj) {
                let data = obj.field;
                //提交
                $.post(url, data, function (res) {
                    layer.msg(res.msg);
                    if (res.code == 200) {
                        //刷新表格
                        userTable.reload();
                        //关闭弹出层
                        layer.close(mainIndex);
                    }
                })
                return false;
            })
        })


    </script>
</head>
<body>
<!--<%&#45;&#45;数据表格上方的表单&#45;&#45;%>-->
<blockquote class="layui-elem-quote">
    <form class="layui-form" id="searchFrm" lay-filter="searchFrm">
        <div class="layui-form-item">
            <label class="layui-form-label">登录名</label>
            <div class="layui-input-inline">
                <input type="text" name="username" class="layui-input">
            </div>
            <label class="layui-form-label">
                真实姓名
            </label>
            <div class="layui-input-inline">
                <input type="text" name="realname" class="layui-input">
            </div>
            <label class="layui-form-label">
                在职状态
            </label>
            <div class="layui-input-inline ">
                <input type="radio" name="deleted" class="layui-input" value="1" title="在职">
                <input type="radio" name="deleted" class="layui-input" value="2" title="离职">
            </div>
            <div class="layui-input-inline">
                <button lay-filter="submitfilter" class="layui-btn " lay-submit><i class="layui-icon layui-btn-ok"></i>查询
                </button>
                <button type="reset" class="layui-btn layui-btn-danger"><i class="layui-icon layui-btn-close"></i>重置
                </button>
            </div>
        </div>
    </form>
</blockquote>

<table id="scoresTable" lay-filter="userTable">

</table>

<!-- 弹出层开始 -->
<div id="addOrUpdateForm" style="display: none;margin: 5px">
    <form class="layui-form" id="dataFrm" lay-filter="dataFrm">
        <div class="layui-form-item">
            <label class="layui-form-label">登陆名</label>
            <div class="layui-input-block">
                <input type="hidden" name="id">
                <input type="text" name="username" lay-verify="required" placeholder="请输入登陆名" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">真实姓名</label>
            <div class="layui-input-block">
                <input type="text" name="realname" lay-verify="required" placeholder="请输入真实姓名" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">角色</label>
            <div class="layui-input-inline">
                <input type="radio" name="role" value="1" title="管理员">
                <input type="radio" name="role" checked value="2" title="业务员">
            </div>
        </div>
        <div class="layui-form-item" style="text-align: center">
            <input type="button" value="提交" class="layui-btn" lay-submit id="doSubmit" lay-filter="doSubmit">
            <input type="reset" value="重置" id="doReset" class="layui-btn layui-btn-danger">
        </div>
    </form>
</div>
<!-- 弹出层结束-->


</body>
</html>
